<template>
    <div class="loginView">
    <el-card class="box-card">
        <template #header>
          <div class="clearfix">
            <span>购物后台</span>
          </div>
        </template>
        <el-tabs v-model="activeName" stretch>
            <el-tab-pane label="登录" name="login">
                <el-form :model="loginForm" status-icon ref="loginForm" :rules="loginRules">
                    <el-form-item label="用户名" label-width="80px" prop="username">
                        <el-input type="text" v-model="loginForm.username"/>
                    </el-form-item>
                    <el-form-item label="密码" label-width="80px" prop="password">
                        <el-input type="password" v-model="loginForm.password"/>
                    </el-form-item>
                    <el-form-item>
                        <el-button type="primary" @click="submitLogin">提交</el-button>
                    </el-form-item>
                </el-form>
            </el-tab-pane>
            <el-tab-pane label="注册" name="register">
                <el-form :model="registerForm" status-icon ref="registerForm">
                    <el-form-item label="用户名" label-width="80px">
                        <el-input type="text" v-model="registerForm.username"/>
                    </el-form-item>
                    <el-form-item label="密码" label-width="80px">
                        <el-input type="password" v-model="registerForm.password"/>
                    </el-form-item>
                    <el-form-item label="确认密码" label-width="80px">
                        <el-input type="password" v-model="registerForm.password"/>
                    </el-form-item>
                    <el-form-item>
                        <el-button type="primary" @click="submitRegister">提交</el-button>
                    </el-form-item>
                </el-form>

             </el-tab-pane>
        </el-tabs>
    </el-card>
    </div>
</template>

<script>
export default {
  data () {
    return {
      activeName: 'login',
      loginForm: {
        username: '',
        password: ''
      },
      registerForm: {
        username: '',
        password: ''
      },
      
      loginRules: {
        username: [
          { required: true, message: '请输入用户名', trigger: 'blur' }
        ],
        password: [
          { required: true, message: '请输入密码', trigger: 'blur' }
        ]
      }
    }
  },
  methods: {
    submitLogin() {
      this.$refs.loginForm.validate((valid) => {
        if (valid) {
          if (this.loginForm.username === '123' && this.loginForm.password === '1234') {
            this.$message.success('登录成功！');
            console.log('登录成功，用户信息：', this.loginForm);
            this.$router.push("/home");
          } else {
            this.$message.error('用户名或密码错误');
          }
        }
      })
    },
    submitRegister() {
      this.$refs.registerForm.validate((valid) => {
        if (valid) {
          this.$message.success('注册成功，请您登录');
          console.log('注册信息：', this.registerForm);
          this.activeName = 'login';
        }
      })
    }
  }
}
</script>

<style scoped>
.loginView{
    width: 100%;
    margin: 0 auto;
    .box-card{
        width: 500px;
        margin: 100px auto;
    }
}
</style>
